<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>04_class与style绑定</title>
    <style>
      .move {
        position: relative;
        left: 0;
      }
      .blue {
        color: blue;
      }
      .skyblue {
        color: skyblue;
      }
    </style>
  </head>
  <body>
    <!--
      1. 理解
        在应用界面中, 某个(些)元素的样式是变化的
        class/style绑定就是专门用来实现动态样式效果的技术
      2. class绑定: :class='xxx'
        xxx是字符串
        xxx是对象
        xxx是数组
      3. style绑定
        :style="{ color: activeColor, fontSize: fontSize + 'px' }"
        其中activeColor/fontSize是data属性
      -->

    <div id="app">
      <h2>1. class绑定: :class='xxx'</h2>
      <p :class="isBlue?'blue':'skyblue'">这是一段文字~</p>
      <p
        :class="{
        blue:isBlue,
        skyblue:!isBlue
      }"
      >
        这是一段文字~
      </p>
      <p :class="[isBlue?'blue':'skyblue','aa','bb']">这是一段文字~</p>
      <button @click="changColor">改变颜色</button>

      <h2>2. style绑定</h2>
      <p
        :style="{
          position,
        left:left+'px'
      }"
      >
        这是一段文字~
      </p>
      <button @click="move">右移</button>
      <p
        :style="
           {
            fontSize: size + 'px'
          }
        "
      >
        字体大小
      </p>
      <input type="text" placeholder="请输入字体大小" v-model="size" />
    </div>

    <script src="../js/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: { isBlue: true, position: 'relative', left: 0, size: 12 },
        methods: {
          changColor() {
            this.isBlue = !this.isBlue
          },
          move() {
            this.left = this.left + 10
          },
        },
      })
      const arr = null
      let x = 0
      console.log(arr?.[x++])
    </script>
  </body>
</html>
